<template>
    <div>
        <el-container>
            <el-header>
                <el-steps :active="active" align-center>
                    <el-step title="确认订单" ></el-step>
                    <el-step title="提交订单" ></el-step>
                    <el-step title="交易完成" ></el-step>
                </el-steps>
            </el-header>
            <div>
                <el-card class="box-card-address" v-for="(item,index) in address" :key="item.Addressid">
                    <div slot="header" class="clearfix">
                        <el-radio v-model="radio" :label=item.Addressid>选择此地址</el-radio>
                        <el-popover
                                placement="right"
                                :v-model="visible">
                            <p>确定删除这个地址吗？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                                <el-button type="primary" size="mini" @click="deleteadress(item.Addressid)">确定</el-button>
                            </div>
                            <el-button type="danger" icon="el-icon-delete" circle slot="reference" ></el-button>
                        </el-popover>
                        <el-button type="primary" icon="el-icon-edit" circle @click="modifyaddress(item.detailaddress,item.Addressid)"></el-button>
                    </div>
                    <div v-for="i in item.detailaddress" :key="i.index" class="text item">
                        {{i}}
                    </div>
                </el-card>
            </div>
            <el-container class="detailed">
                <el-aside width="640px">
                    <h3>订单信息</h3>
                    <el-table
                            :data="tableData"
                            style="width: 640px"
                            height="300">
                        <el-table-column
                                fixed
                                prop="goods_img"
                                label="商品图片"
                                width="120">
                            <template slot-scope="scope">
                                <img :src="scope.row.goods_img"/>
                            </template>
                        </el-table-column>

                        <el-table-column
                                prop="goods_name"
                                label="　  商品名称"
                                width="120">
                        </el-table-column>

                        <el-table-column
                                prop="goods_style"
                                label="商品属性"
                                width="100">
                        </el-table-column>

                        <el-table-column
                                prop="goods_price"
                                label="商品单价"
                                width="100">
                        </el-table-column>

                        <el-table-column
                                prop="goods_count"
                                label="商品数量"
                                width="100">
                        </el-table-column>

                        <el-table-column
                                prop="goods_total"
                                label="总价"
                                width="100">
                        </el-table-column>
                    </el-table>
                </el-aside>
                <el-main class="user-info">
                    <h3>填写地址</h3>
                    <el-form  :label-position="labelPosition" label-width="80px" :model="addressForm" :rules="rules" ref="addressForm">
                        <el-form-item label="省市" prop="region" >
                            <el-cascader
                                    v-model="addressForm.region"
                                    :options="options"
                                    :props="{ expandTrigger: 'hover' }"
                                    @change="handleChange">
                            </el-cascader>
                        </el-form-item>
                        <el-form-item label="区/县/镇" prop="district">
                            <el-input v-model="addressForm.district"></el-input>
                        </el-form-item>
                        <el-form-item label="详细地址" prop="address">
                            <el-input v-model="addressForm.address"></el-input>
                        </el-form-item>
                        <el-form-item label="收件人" prop="receiver">
                            <el-input v-model="addressForm.receiver"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式" prop="phone">
                            <el-input v-model="addressForm.phone"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('addressForm')" style="background: #00A8FF;margin: 0px;float: left">立即创建</el-button>
                            <el-button @click="resetForm('addressForm')" style="margin: 0px" plain>重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-main>
            </el-container>
            <el-container class="page_buttom">
                <el-aside width="640px">
                    <span style="float: left; font-size: 20px; font-weight: 600;text-indent: 2em;line-height: 40px;">添加备注</span>
                    <el-input
                            type="textarea"
                            placeholder="请输入内容"
                            v-model="textarea"
                            maxlength="30"
                            show-word-limit
                    >
                    </el-input>
                </el-aside>
                <el-main>
                    <el-button type="danger" style="width: 200px;height: 50px;margin: 3vh 0 0 13vw" @click="next">付款</el-button>
                </el-main>
            </el-container>
        </el-container>

        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="modifyForm" :rules="rules" ref="modifyForm">
                <el-form-item label="省市" prop="region" >
                    <el-cascader
                            v-model="modifyForm.region"
                            :options="options"
                            :props="{ expandTrigger: 'hover' }"
                            @change="handleChange">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="modifyForm.address"></el-input>
                </el-form-item>
                <el-form-item label="收件人" prop="receiver">
                    <el-input v-model="modifyForm.receiver"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="phone">
                    <el-input v-model="modifyForm.phone"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitmodifyForm('modifyForm')">确 定</el-button>
            </div>
        </el-dialog>
        <foot></foot>
    </div>
</template>
<style scoped>
    .box-card-address{
        font-size: 14px;
        text-align: left;
        width: 25vw;
        display: inline-block;
        margin-left: 6vw;
        height: 30vh;
    }
    .text{
        display: inline-block;
        margin-right: 20px;
    }
    .text:last-child{
        display: block;
    }
    .el-radio{
        display: inline;
    }
    .clearfix{
        font-size: 16px;
        font-weight: 800;
    }
    img{
        background-size: cover;
        width: 120px;
    }
    .el-header{
        text-align: left;
        width: 80vw;
        margin-left: 6.5vw;
    }
    .el-aside{
        margin-left: 20px;
    }
    .el-container{
        margin-top: 30px;
        margin-left: 3vw;
    }
    /deep/.el-input{
        width: 215px;
        margin-left: -150px;
    }

    .page_buttom{
        margin-top: -1px;
    }
    .block{
        width: 200px;
        height: 200px;
        margin-top: 5px;
        margin-right:5vw;
        float: right;
        border: 2px solid black;
    }
    .detailed,.page_buttom{
        margin-left: 4.5vw;
    }
    .demo-image__placeholder{
        margin-right: 5vw;
    }
    .user-info>.el-form{
        margin-left: 2vw;
    }
    .user-info{
        padding: 0;
    }
    .el-form-item{
        position: relative;
        margin-left: 3.5vw;
        text-align: center;
    }
    h3{
        text-align: center;
    }
</style>
<script>
    export default {
        data() {
            return {
                userid:'',
                bill:this.$store.state.confirmbill,
                ServeUrl:this.$store.state.beginUrl,
                visible: false,
                dialogFormVisible: false,
                formLabelWidth: '120px',
                address:[],
                radio: '',
                tableData: [],
                textarea: '',
                labelPosition: 'left',
                addressForm: {
                    region:[],
                    country:'中国大陆',
                    address:'',
                    receiver: '',
                    phone: '',
                    district:'',
                },
                modifyForm: {
                    addressid:'',
                    region:[],
                    country:'中国大陆',
                    address:'',
                    receiver: '',
                    phone: '',
                },
                options:this.$store.state.options,
                rules: {
                    receiver: [
                        { required: true, message: '请输入收件人名称', trigger: 'blur' },
                    ],
                    region: [
                        { type: 'array', required: true, message: '请选择省市/自治区', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '请填写详细地址', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请填写手机号码', trigger: 'change' },
                        { min: 11, max: 11, message: '11位手机号码', trigger: 'change' }
                    ],
                    district: [
                        { required: true, message: '请填写区/县/镇', trigger: 'blur' }
                    ]
                },
                active: 1,
                confirmbill:null,
                orderInfo:null,
            };
        },

        methods: {
            getOrderInfo(){
                this.confirmbill = this.$store.state.confirmbill;
                this.orderInfo = this.$store.state.newOrderInfo;
                console.log(this.confirmbill);
                console.log(this.orderInfo);

            },
            next() {
                if (this.active++ > 2) this.active = 2;
                if(this.radio==''){
                    this.active=1;
                    this.$message.error('请选择一个地址');
                }else {
                    console.log(this.radio);
                    /*定时生成*/
                    this.createOrder();

                }

            },
            getOutTradeNo(){
                var vNow = new Date();
                var sNow = "";
                sNow += String(vNow.getFullYear());
                sNow += String(vNow.getMonth() + 1);
                sNow += String(vNow.getDate());
                sNow += String(vNow.getHours());
                sNow += String(vNow.getMinutes());
                sNow += String(vNow.getSeconds());
                sNow += String(vNow.getMilliseconds());
                return sNow;
            },

            createOrder(){
                /*确认订单*/
                let time = new Date().getTime();
                let date = this.$moment(time).format("YYYY-MM-DD HH:mm:ss");
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                let uoOrderstatus = 0;
                let uoSaledstatus = 0;
                console.log(this.userid);
                console.log(this.bill);
                let data={
                    'user':user,
                    'uoOrdertime':date,
                    'uoOrderstatus':uoOrderstatus,
                    'uoSaledstatus':uoSaledstatus,
                };
                /*先产生订单*/
                this.$axios.post("/userorderlist/saveAndSearch",data).then(result=>{
                    console.log(result);
                    let userOrderList = result.data;
                    /*存储订单信息*/
                    this.$store.commit("saveOrderInfo",userOrderList);
                    this.$message.success("下单成功！");
                    /*存储订单的商品信息*/
                    let orderListData={
                        'oOrderid':result.data.uoOrderid,
                        'oGoodsid':this.bill.shopGoods.goodsid,
                        'oCount':this.bill.count,

                    };
                    this.$axios.post('/orderlist/save',orderListData).then(result=>{
                        console.log(result);
                        this.sendPayInfo();

                    });
                })
            },
            sendPayInfo(){
                var newOrderInfo = this.$store.state.newOrderInfo;
                var orderInfo = null;
                console.log('进入支付页面存储数据');
                if (null != newOrderInfo){
                    this.getOrderInfo();
                    /*组装数据*/
                    orderInfo={
                        orderId:newOrderInfo.uoOrderid+"O"+this.getOutTradeNo(),
                        payMonney:Math.round(this.confirmbill.goodprice*this.bill.count),
                        goodsName:this.confirmbill.goodname,
                    };
                }
                // this.$router.push('Alipay');
                console.log(orderInfo);
                window.sessionStorage.setItem('orderInfo',orderInfo);
                window.location.href="http://192.168.1.108:90?orderId="+orderInfo.orderId+"&payMonney="+orderInfo.payMonney+"&goodsName="+orderInfo.goodsName;
            },
            handleChange(value) {
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('/user/insertaddress',{
                            raAddressid:null,
                            raUserid:this.userid,
                            raProvince:this.addressForm.region[0],
                            raCity:this.addressForm.region[1],
                            raDetailedaddress:this.addressForm.district+this.addressForm.address,
                            raRecipient:this.addressForm.receiver,
                            raPhone:this.addressForm.phone,
                            raDefaultstatus:1
                        }).then(ret=>{
                            if(ret.data=='insertsucess'){
                                this.$message.success('添加地址成功');
                                location.reload();
                            }else {
                                this.$message.error('添加失败');
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            submitmodifyForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.put('/user/updateaddress',{
                            raAddressid:this.modifyForm.addressid,
                            raUserid:this.userid,
                            raProvince:this.modifyForm.region[0],
                            raCity:this.modifyForm.region[1],
                            raDetailedaddress:this.modifyForm.address,
                            raRecipient:this.modifyForm.receiver,
                            raPhone:this.modifyForm.phone,
                            raDefaultstatus:1
                        }).then(ret=>{
                            if(ret.data=='updatesucess'){
                                this.$message.success('地址修改成功');
                                location.reload();
                            }else {
                                this.$message.error('地址修改失败');
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            modifyaddress(item,addressid){
                this.dialogFormVisible = true
                this.modifyForm.addressid=addressid
                this.modifyForm.region.push(item[1],item[2])
                this.modifyForm.address=item[3]
                this.modifyForm.receiver=item[4]
                this.modifyForm.phone=item[5]
            },
            deleteadress(addressid){
                this.visible = false
                this.$axios.delete('/user/deleteaddress?raAddressid='+addressid).then(ret=>{
                    if(ret.data=='deletesucess'){
                        this.$message.success('删除地址成功');
                        location.reload();
                    }else {
                        this.$message.error('删除地址成功失败');
                        this.visible = false
                    }
                })
            }
        },
        created(){
            if(this.bill==null){
                let confirmbill=JSON.parse(window.sessionStorage.getItem('confirmbill'));
                this.bill=confirmbill;
            }
            this.tableData.push({
                goods_img: this.ServeUrl+this.bill.goodpic,
                goods_name: this.bill.goodname,
                goods_style: this.bill.size,
                goods_price: this.bill.goodprice,
                goods_count: this.bill.count,
                goods_total: this.bill.count*this.bill.goodprice
            }),
                this.userid=JSON.parse(window.sessionStorage.getItem('user')).uUserid;
            this.$axios.get('/user/queryaddress?uid='+this.userid).then(ret=>{
                ret.data.forEach(data=>{
                    this.address.push({
                        Addressid:data.raAddressid,
                        raUserid:data.raUserid,
                        detailaddress:[
                            '中国大陆',
                            data.raProvince,
                            data.raCity,
                            data.raDetailedaddress,
                            data.raRecipient,
                            data.raPhone,
                        ]
                    });
                })
            })
        }
    }
</script>